<div class="content">
    <div id="example_title">
        <h1>Formatters</h1>
        You can use formatters to format display of a value. Internally formatters are used in grid as option for render function.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<input id="str" type="text" size="20" onkeyup="update()" style="border: 1px solid silver; padding: 3px; height: 30px; width: 200px;">
<br><br>
<div style="float: left; width: 130px;">Number</div>         <div id="fNumber" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Number (1.001)</div> <div id="fNumber2" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Money</div>          <div id="fMoney" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Percent</div>        <div id="fPercent" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Size</div>           <div id="fSize" style="margin-left: 130px;">...</div>
<div style="height: 20px"></div>
<div style="float: left; width: 130px;">Date</div>           <div id="fDate" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Time</div>           <div id="fTime" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Date Time</div>      <div id="fDateTime" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">GMT Date Time</div>  <div id="fGMT" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Time Stamp</div>     <div id="fTimeStamp" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Age</div>            <div id="fAge" style="margin-left: 130px;">...</div>
<div style="float: left; width: 130px;">Interval</div>       <div id="fInterval" style="margin-left: 130px;">...</div>

<!--CODE-->
<script type="module">
import { w2utils, w2field, query } from '__W2UI_PATH__'

new w2field({
    el: query('#str')[0],
    type: 'float',
    autoFormat: false
});
window.update = function () {
    var val = query('#str').val();
    if (w2utils.isFloat(val)) {
        query('#fNumber').html(w2utils.formatters.number({ value: val }));
        query('#fNumber2').html(w2utils.formatters.number({ value: val, params: 3 }));
        query('#fMoney').html(w2utils.formatters.money({ value: val }));
        query('#fPercent').html(w2utils.formatters.percent({ value: val }));
        query('#fSize').html(w2utils.formatters.size({ value: val }));
    } else {
        query('#fNumber').html('--');
        query('#fNumber2').html('--');
        query('#fMoney').html('--');
        query('#fPercent').html('--');
        query('#fSize').html('--');
    }
    var dt = w2utils.isDate(val, null, true);
    if (dt !== false) {
        query('#fDate').html(w2utils.formatters.date({ value: val }));
        query('#fDateTime').html(w2utils.formatters.datetime({ value: val }));
        query('#fTime').html(w2utils.formatters.time({ value: val }));
        query('#fGMT').html(w2utils.formatters.gmt({ value: val }));
        query('#fTimeStamp').html(w2utils.formatters.timestamp({ value: val }));
        query('#fAge').html(w2utils.formatters.age({ value: val }));
        query('#fInterval').html(w2utils.formatters.interval({ value: val }));
    } else {
        query('#fDate').html('--');
        query('#fDateTime').html('--');
        query('#fTime').html('--');
        query('#fGMT').html('--');
        query('#fTimeStamp').html('--');
        query('#fAge').html('--');
        query('#fInterval').html('--');
    }
}
</script>
